﻿@{
    ViewData["Title"] = "网站栏目编辑";
    Layout = "~/Views/Shared/_ManageLayout.cshtml";
    var classid = ViewData["classId"] as int?;
    var classType = new Dictionary<string, string>();
    classType.Add("lay-filter", "classType");
}
@section css{
    <style>
        .layui-form-item .layui-inline {
            margin-bottom: 15px !important;
        }
    </style>
}
<!-- 加载动画 -->
<div class="page-loading">
    <div class="ball-loader">
        <span></span><span></span><span></span><span></span>
    </div>
</div>
<!-- 正文开始 -->
<form class="layui-form" id="formAdvForm" lay-filter="formAdvForm">
    <input name="id" type="hidden" value="@classid" />
    <div class="layui-fluid" style="padding-bottom: 75px;">
        <div class="layui-card">
            <div class="layui-card-header">栏目信息</div>
            <div class="layui-card-body">
                <div class="layui-form-item layui-row">
                    <div class="layui-inline layui-col-md5">
                        <label class="layui-form-label layui-form-required">上级栏目:</label>
                        <div class="layui-input-block">
                            <input type="text" id="parenttree" name="parenttree" lay-filter="parenttree" class="layui-input" readonly="readonly">
                        </div>
                    </div>
                    <input type="hidden" id="parentId" name="parentId">
                    <input type="hidden" id="languageId" name="languageId">
                    <div class="layui-inline layui-col-md5">
                        <label class="layui-form-label layui-form-required">栏目名称:</label>
                        <div class="layui-input-block">
                            <input name="className" placeholder="请输入栏目名称" class="layui-input" />
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md5">
                        <label class="layui-form-label layui-form-required">SeoKeywords:</label>
                        <div class="layui-input-block">
                            <input name="seoKeywords" placeholder="请输入SeoKeywords" class="layui-input" />
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md5">
                        <label class="layui-form-label layui-form-required">Seo描述:</label>
                        <div class="layui-input-block">
                            <input name="seoDescritions" placeholder="请输入Seo描述" class="layui-input" />
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md5">
                        <label class="layui-form-label layui-form-required">栏目类型:</label>
                        <div class="layui-input-block">
                            @Html.DropDownList("classType", EnumExtend.GetSelectList(typeof(ClassType), "请选择栏目类型", "")).HtmlAttributesCustom(classType)
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md5">
                        <label class="layui-form-label layui-form-required">访问路径:</label>
                        <div class="layui-input-block">
                            <input name="path" type="text" lay-verify="required|ContentPath" placeholder="请输入访问路径" class="layui-input" />
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md5">
                        <label class="layui-form-label layui-form-required">排序(越大越靠前):</label>
                        <div class="layui-input-block">
                            <input name="sort" type="number" placeholder="请输入排序" class="layui-input" />
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md7">
                        <label class="layui-form-label layui-form-required">是否推荐(推荐产品会在首页展示):</label>
                        <div class="layui-input-block">
                            <input type="checkbox" name="isShowCheck" lay-filter="isShowCheck" lay-skin="primary">
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md12" id="imgtitle" style="display:none">
                        <label class="layui-form-label">标题图片:</label>
                        <div class="layui-upload-drag" id="uploadImg">
                            <i class="layui-icon"></i>
                            <p>点击上传，或将文件拖拽到此处</p>
                            <div class="layui-hide" id="uploadDemoView">
                                <hr>
                                <img src="" alt="上传成功后渲染" style="max-height: 120px; max-height: 120px">
                            </div>
                        </div>
                        <input name="titleImg" type="hidden">
                    </div>
                </div>

            </div>
        </div>
        <div class="layui-card" id="contentCard">
            <div class="layui-card-header">栏目内容</div>
            <div class="layui-form-item layui-row">
                <div class="layui-inline layui-col-md12">
                    <label class="layui-form-label layui-form-required">栏目内容:</label>
                    <div class="layui-input-block">
                        <textarea name="content" id="content" class="layui-textarea"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="form-group-bottom text-right">
        <button type="reset" class="layui-btn layui-btn-primary">&emsp;重置&emsp;</button>
        <a class="layui-btn" lay-filter="formAdvSubmit" lay-submit>&emsp;保存&emsp;</a>
    </div>

</form>
<script type="text/javascript">
    layui.use(['admin', 'layer', 'form', 'table', 'laydate', 'upload', 'CKEDITOR','treeSelect'], function () {
        var $ = layui.jquery;
        var admin = layui.admin;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var laydate = layui.laydate;
        var CKEDITOR = layui.CKEDITOR;
        var ClassId = $("[name=id]").val();
        var treeSelect = layui.treeSelect;
        var upload = layui.upload;
        var index2 = parent.layer.getFrameIndex(window.name);
        CKEDITOR.replace('content', { height: 480 });
        var insEdt = CKEDITOR.instances.content;
        var Model = {};
        form.verify({
            ContentPath: function (value, item) { //value：表单的值、item：表单的DOM对象
                if (value.length < 3) {
                    return "路径长度必须大于3个字符";
                }
            }
        });
        treeSelect.render({
            elem: '#parenttree',// 选择器
            data: '/api/ContentClass/GetContentTreeList?ContentId=' + ClassId,// 数据接口
            placeholder: '请选择上级类型', // 数据
            search: false,// 是否开启搜索功能：true/false，默认false
            style: { // 一些可定制的样式
                folder: {
                    enable: true
                },
                line: {
                    enable: true
                }
            },
            click: function (d) {
                if (d.current.isLanguage) {
                    $("#parentId").val(0);
                } else {
                    $("#parentId").val(d.current.id);
                }
                $("#languageId").val(d.current.languageId);
            },
            success: function (d) {
                 //加载完成后的回调函数
                if (ClassId != "0") {
                    LoadClass();
                }
            }
        });
        form.render('select');
        form.on('checkbox(isShowCheck)', function (data) {
            if ($(this).is(':checked')) {
                isShow(1);
            } else {
                isShow(0);
            }
        });

        form.on('select(classType)', function (data) {
            classType(data.value)
        });
        /* 监听表单提交 */
        form.on('submit(formAdvSubmit)', function (data) {
            var FromData = data.field;
            const content = insEdt.getData();
            var field = Object.assign(FromData, { content: content });
            var url = ClassId == "0" ? "/api/ContentClass" : "/api/ContentClass/" + field.id;
            var typestr = ClassId == "0" ? "post" : "put";
            if ($("[name=isShowCheck]").is(':checked')) {
                field.isShow = 1;
            } else {
                field.isShow = 0;
            }
            layer.confirm('确认要保存吗?', { btn: ['确定', '取消'] }
                , function (index) {
                    layer.load(2);
                    $.ajax({
                        url: url,
                        type: typestr,
                        data: JSON.stringify(field),
                        contentType: "application/json",
                        dataType: "json",
                        complete: function (obj) {
                            layer.closeAll('loading');
                        },
                        success: function (result) {
                            if (result.success) {
                                layer.msg(result.message, { icon: 1, time: 1200 }, function () {
                                    if (ClassId != "0") {
                                        window.location.reload();
                                    } else {
                                        window.location.href = "/manage/ContentClassEdit?classId=" + result.data;
                                    }
                                });
                            } else {
                                layer.msg(result.message, { icon: 2 });
                            }
                        }
                    });
                });
        });

        upload.render({
            elem: '#uploadImg'
            , url: '/api/upload/manageUpload'
            , size:@(AppSetting.MaxFile * 1024)
            , done: function (res) {
                if (res.success) {
                    layer.msg(res.message, { icon: 1 });
                    $('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.data.src);
                    $("[name=titleImg]").val(res.data.src);
                } else {
                    layer.msg(res.message, { icon: 2 });
                }
            }
        });
        //加载信息
        function LoadClass() {
            $.ajax({
                url: '/api/ContentClass/' + ClassId,
                type: 'get',
                contentType: "application/json",
                dataType: "json",
                async: false,
                success: function (res) {
                    if (res.success) {
                        Model = res.data;
                        form.val('formAdvForm', res.data);
                        form.render('select');
                        classType(res.data.classType);
                        isShow(res.data.isShow);
                        // 获取zTree对象，可以调用zTree方法
                        if (res.data.parentId != 0) {
                            treeSelect.checkNode('parenttree', res.data.parentId);
                        } else {
                            treeSelect.checkNode('parenttree', "Language_" + res.data.languageId);
                        }
                        if (res.data.isShow == 1) {
                            $("[name=isShowCheck]").prop("checked", true);
                            form.render('checkbox');
                        }
                        if (res.data.titleImg != null && res.data.titleImg != '') {
                            $('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.data.titleImg);
                            $("[name=titleImg]").val(res.data.titleImg);
                        }
                    }
                }
            });
        }

        function classType(classtype) {
            if (classtype ==@((int)ClassType.Content)) {
                $("#contentCard").fadeIn();
            } else {
                $("#contentCard").fadeOut();
            }
        }

        function isShow(isShow) {
            if (isShow == 1) {
                $("#imgtitle").fadeIn();
            } else {
                $("#imgtitle").fadeOut();
            }
        }
    });
</script>
